<template>
  <div class="user-break-rules">
    <el-form>
      <el-form-item>
        <el-button type="primary" @click="openAddor()">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="breakRules" border height="450px">
      <el-table-column label="序号" align="center" type="index" width="50" />
      <el-table-column label="违规时间" width="120" align="center" prop="breakRuleTime" />
      <el-table-column label="处罚原因" align="center" prop="reason">
        <el-tooltip :content="scope.row.reason" placement="top" slot-scope="scope">
          <div class="ellipsis">{{scope.row.reason}}</div>
        </el-tooltip>
      </el-table-column>
      <el-table-column label="处罚结果" align="center" prop="punishResult">
        <el-tooltip :content="scope.row.punishResult" placement="top" slot-scope="scope">
          <div class="ellipsis">{{scope.row.punishResult}}</div>
        </el-tooltip>
      </el-table-column>
      <el-table-column label="操作" align="center" width="180">
        <template slot-scope="scope">
          <el-button type="text" @click="openEditor(scope.row.id)">查看/编辑</el-button>
          <el-button type="text" @click="deleteById(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

<!--    <el-dialog-->
<!--      append-to-body-->
<!--      :visible.sync="editorVisible"-->
<!--      :close-on-click-modal="false"-->
<!--      @click="closeEditor()"-->
<!--      title="编辑违章记录"-->
<!--    >-->
<!--      <el-form-->
<!--        label-width="100px"-->
<!--        ref="breakRuleForm"-->
<!--        :rules="breakRuleFormRules"-->
<!--        :model="breakRuleForm"-->
<!--      >-->
<!--        <el-row>-->
<!--          <el-col :span="11">-->
<!--            <el-form-item label="违规时间" prop="breakRuleTimeStr">-->
<!--              <el-date-picker-->
<!--                style="width:100%;"-->
<!--                v-model="breakRuleForm.breakRuleTimeStr"-->
<!--                type="date"-->
<!--                value-format="yyyy-MM-dd"-->
<!--                placeholder="选择日期"-->
<!--              ></el-date-picker>-->
<!--            </el-form-item>-->
<!--          </el-col>-->

<!--          <el-col :span="11" :offset="1">-->
<!--            <el-form-item label="违规规则" prop="breakRule">-->
<!--              <el-input v-model="breakRuleForm.breakRule" />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->

<!--        <el-row>-->
<!--          <el-col :span="11">-->
<!--            <el-form-item label="处罚原因" prop="reason">-->
<!--              <el-input type="textarea" v-model="breakRuleForm.reason" />-->
<!--            </el-form-item>-->
<!--          </el-col>-->

<!--          <el-col :span="11" :offset="1">-->
<!--            <el-form-item label="处罚结果" prop="punishResult">-->
<!--              <el-input type="textarea" v-model="breakRuleForm.punishResult" />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->

<!--        <el-row>-->
<!--          <el-col :span="11">-->
<!--            <el-form-item label="处罚等级" prop="punishLevel">-->
<!--              <el-select v-model="breakRuleForm.punishLevel" filterable placeholder="请选择" style="width:100%">-->
<!--                <el-option-->
<!--                  v-for="item in punishLevelList"-->
<!--                  :key="item.id"-->
<!--                  :label="item.label"-->
<!--                  :value="item.label"-->
<!--                ></el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->

<!--        <el-row>-->
<!--          <el-col :span="11">-->
<!--            <el-form-item label="处罚通知书" prop="punishNoticeUrl">-->
<!--              <avatar-uploader-->
<!--                :avatar="breakRuleForm.punishNoticeUrl"-->
<!--                @uploaded="punishNoticeUploaded"-->
<!--              />-->
<!--            </el-form-item>-->
<!--          </el-col>-->

<!--          <el-col :span="11" :offset="1">-->
<!--            <el-form-item label="培训通知书" prop="trainNoticeUrl">-->
<!--              <avatar-uploader-->
<!--                :avatar="breakRuleForm.trainNoticeUrl"-->
<!--                @uploaded="trainNoticeUploaded"-->
<!--              />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--      </el-form>-->

<!--      <div slot="footer">-->
<!--        <el-button @click="closeEditor()">取消</el-button>-->
<!--        <el-button type="primary" @click="save()">保存</el-button>-->
<!--      </div>-->
<!--    </el-dialog>-->
    <user-detail-violations ref="userDetailViolations" @refreshDataList="loadBreakRules"></user-detail-violations>
  </div>
</template>

<script>
import AvatarUploader from '../../../components/uploader/avatar-uploader'
import UserDetailViolations from './violations/user-detail-violations'
export default {
  name: 'userBreakRules',
  components: {
    AvatarUploader,
    UserDetailViolations
  },
  props: {
    userId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      breakRules: [],
      punishLevelList: [],
      editorVisible: false,
      breakRuleForm: {
        id: 0,
        userId: 0,
        breakRuleTimeStr: null,
        breakRule: '',
        punishLevel: null,
        punishResult: '',
        reason: '',
        trainNoticeUrl: '',
        punishNoticeUrl: '',
        isEdit: false
      },
      breakRuleFormRules: {
        breakRuleTimeStr: [
          { required: true, message: '请选择违规时间', trigger: 'blur' }
        ],
        reason: [
          { required: true, message: '请填写处罚原因', trigger: 'blur' }
        ],
        punishResult: [
          { required: true, message: '请填写处罚结果', trigger: 'blur' }
        ],
        userId: [{ required: true, message: '未指定用户', trigger: 'blur' }]
      }
    }
  },
  methods: {
    async loadPunishLevelList() {
      let res = await this.$http({
        method: 'post',
        url: this.$http.adornUrl('/usercenter-admin/dict/type'),
        data: { type: 'PUNISH' }
      })
      this.punishLevelList = res.data
    },
    async loadBreakRules() {
      let res = await this.$http({
        method: 'post',
        url: this.$http.adornUrl('/usercenter-admin/breakRule/list'),
        data: { userId: this.userId }
      })
      this.breakRules = res.data
    },
    async buildForm(id) {
      let res = await this.$http({
        method: 'post',
        url: this.$http.adornUrl(`/breakrule-admin/breakRule/info/${id}`)
      })

      let breakRule = res.data
      this.breakRuleForm.isEdit = true
      this.breakRuleForm.id = breakRule.id
      this.breakRuleForm.userId = breakRule.userId
      this.breakRuleForm.breakRuleTimeStr = breakRule.breakRuleTimeStr
      this.breakRuleForm.breakRule = breakRule.breakRule
      this.breakRuleForm.punishLevel = breakRule.punishLevel
      this.breakRuleForm.punishResult = breakRule.punishResult
      this.breakRuleForm.reason = breakRule.reason
      this.breakRuleForm.punishNoticeUrl = breakRule.punishNoticeUrl
      this.breakRuleForm.trainNoticeUrl = breakRule.trainNoticeUrl
    },
    async save() {
      let valid = await this.$refs.breakRuleForm.validate()
      if (!valid) return

      let res = await this.$http({
        method: 'post',
        url: this.$http.adornUrl(
          `/breakrule-admin/breakRule/${
            this.breakRuleForm.isEdit ? 'update' : 'save'
          }`
        ),
        data: this.breakRuleForm
      })

      if (res && res.code === 200) {
        this.$notify.success({ title: '成功', message: '保存违规记录成功' })
        this.closeEditor()
        this.loadBreakRules()
      } else {
        this.$notify.error({ title: '错误', message: res.msg })
      }
    },
    async deleteById(id) {
      let confirm = await this.$confirm('您确认删除当前违规记录吗', '提示')
      if (confirm !== 'confirm') return

      let res = await this.$http({
        method: 'post',
        url: this.$http.adornUrl('/usercenter-admin/breakRule/delete'),
        data: { id: id }
      })

      if (res && res.code === 200) {
        this.$notify.success({ title: '成功', message: '删除违章记录成功' })
        this.loadBreakRules()
        this.closeEditor()
      } else {
        this.$notify.error({ title: '错误', message: res.msg })
      }
    },
    // openEditor(id) {
    //   this.editorVisible = true
    //   this.$nextTick(() => {
    //     this.$refs.breakRuleForm.resetFields()
    //     this.breakRuleForm.userId = this.userId
    //     if (id) {
    //       this.buildForm(id)
    //     } else {
    //       this.breakRuleForm.isEdit = false
    //     }
    //   })
    // },
    openAddor() {
      this.$nextTick(() => {
        this.$refs.userDetailViolations.open(this.userId)
      })
    },
    openEditor(id) {
      this.$nextTick(() => {
        this.$refs.userDetailViolations.init(id)
      })
    },
    closeEditor() {
      this.editorVisible = false
    },
    punishNoticeUploaded(file) {
      this.breakRuleForm.punishNoticeUrl = file.url
    },
    trainNoticeUploaded(file) {
      this.breakRuleForm.trainNoticeUrl = file.url
    }
  },
  created() {
    this.loadPunishLevelList()
    this.loadBreakRules()
  }
}
</script>

<style>
</style>
